<template>
	<!-- class="dashboard-container" -->
	<div style="padding: 1rem">
		<div class="inverter-info-form">
			<h2 style="background-color: #fff; color: #000; text-align: center">{{ $t('message.inverterNewsEnter.pageInverterNewsWrite') }}</h2>
			<div class="section">
				<h4>{{ $t('message.inverterNewsEnter.pageInverterNews') }}</h4>
				<table>
					<tr>
						<td class="label">{{ $t('message.inverterNewsEnter.pageSubstationName') }}</td>
						<td><input type="text" v-model="formData.stationName" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageMPPTs') }}</td>
						<td><input type="text" v-model="formData.mpptCount" /></td>
						<td class="label">{{ $t('message.propertyManage.pageInstallation') }}</td>
						<td><input type="text" v-model="formData.installationLocation" /></td>
						<td class="label">{{ $t('message.propertyManage.pageDeviceName') }}</td>
						<td><input type="text" v-model="formData.deviceName" /></td>
					</tr>
					<tr>
						<td class="label">{{ $t('message.inverterNewsEnter.pageDConnected') }}</td>
						<td><input type="text" v-model="formData.componentModel" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageTransformer') }}</td>
						<td><input type="text" v-model="formData.transformer" /></td>
						<td class="label">{{ $t('message.propertyManage.pageDeviceType') }}</td>
						<td><input type="text" v-model="formData.deviceType" /></td>
						<td class="label">{{ $t('message.propertyManage.pageWarranty') }}</td>
						<td><input type="text" v-model="formData.warrantyPeriod" /></td>
					</tr>
					<tr>
						<td class="label">{{ $t('message.inverterNewsEnter.pageBranchNumber') }}</td>
						<td><input type="text" v-model="formData.branchNumber" /></td>
						<td class="label">{{ $t('message.propertyManage.pageDeviceID') }}</td>
						<td><input type="text" v-model="formData.deviceInternalNumber" /></td>
						<td class="label">{{ $t('message.propertyManage.pageManufacturerID') }}</td>
						<td><input type="text" v-model="formData.manufacturerNumber" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageComponent') }}</td>
						<td><input type="text" v-model="formData.componentManufacturer" /></td>
					</tr>
					<tr>
						<td class="label">{{ $t('message.propertyManage.pageModel') }}</td>
						<td><input type="text" v-model="formData.modelSpec" /></td>
						<td class="label">{{ $t('message.propertyManage.pageManufacturer') }}</td>
						<td><input type="text" v-model="formData.manufacturer" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageOrientation') }}</td>
						<td><input type="text" v-model="formData.componentOrientation" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageModulePower') }}</td>
						<td><input type="text" v-model="formData.componentPower" /></td>
					</tr>
					<tr>
						<td class="label">{{ $t('message.inverterNewsEnter.pageInverterType') }}</td>
						<td><input type="text" v-model="formData.inverterType" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageTiltAngle') }}</td>
						<td><input type="text" v-model="formData.componentTilt" /></td>
					</tr>
				</table>
			</div>

			<div class="section">
				<h4>{{ $t('message.inverterNewsEnter.pageInputParameters') }}</h4>
				<table>
					<tr>
						<td class="label">{{ $t('message.inverterNewsEnter.pageMaxPower') }}</td>
						<td><input type="text" v-model="formData.maxInputPower" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageRatedVoltage') }}</td>
						<td><input type="text" v-model="formData.ratedInputVoltage" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageMaxShortCircuit') }}</td>
						<td><input type="text" v-model="formData.mpptShortCircuitCurrent" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageStartupVoltage') }}</td>
						<td><input type="text" v-model="formData.startVoltage" /></td>
					</tr>
					<tr>
						<td class="label">{{ $t('message.inverterNewsEnter.pageFullMPPT') }}</td>
						<td><input type="text" v-model="formData.fullLoadMpptRange" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageMaxStrings') }}</td>
						<td><input type="text" v-model="formData.maxInputStrings" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageVoltageRange') }}</td>
						<td><input type="text" v-model="formData.workingVoltageRange" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageNumberMPPT') }}</td>
						<td><input type="text" v-model="formData.mpptCount" /></td>
					</tr>
					<tr>
						<td class="label">{{ $t('message.inverterNewsEnter.pageMaxInputCurrent') }}</td>
						<td><input type="text" v-model="formData.mpptMaxInputCurrent" /></td>
					</tr>
				</table>
			</div>

			<div class="section">
				<h4>{{ $t('message.inverterNewsEnter.pageOutputParameters') }}</h4>
				<table>
					<tr>
						<td class="label">{{ $t('message.inverterNewsEnter.pageOutputPower') }}</td>
						<td><input type="text" v-model="formData.ratedOutputPower" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pagePowerFactor') }}</td>
						<td><input type="text" v-model="formData.powerFactorRange" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageMaxOutputCurrent') }}</td>
						<td><input type="text" v-model="formData.maxOutputCurrent" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageRatedOutputVoltag') }}</td>
						<td><input type="text" v-model="formData.ratedOutputVoltage" /></td>
					</tr>
					<tr>
						<td class="label">{{ $t('message.inverterNewsEnter.pageGridConnection') }}</td>
						<td><input type="text" v-model="formData.gridConnectionMethod" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageVoltageFrequency') }}</td>
						<td><input type="text" v-model="formData.outputVoltageFrequencyRange" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageRatedOutputCurrent') }}</td>
						<td><input type="text" v-model="formData.ratedOutputCurrent" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageMaxOutputPower') }}</td>
						<td><input type="text" v-model="formData.maxApparentPower" /></td>
					</tr>
					<tr>
						<td class="label">{{ $t('message.inverterNewsEnter.pageHarmonicDistortion') }}</td>
						<td><input type="text" v-model="formData.maxTotalHarmonicDistortion" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageRatedFrequency') }}</td>
						<td><input type="text" v-model="formData.ratedOutputVoltageFrequency" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageOutputVoltageRange') }}</td>
						<td><input type="text" v-model="formData.outputVoltageRange" /></td>
					</tr>
				</table>
			</div>

			<div class="section">
				<h4>{{ $t('message.inverterNewsEnter.pageGeneralParameters') }}</h4>
				<table>
					<tr>
						<td class="label">{{ $t('message.inverterNewsEnter.pageMaxEfficiency') }}</td>
						<td><input type="text" v-model="formData.maxEfficiency" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageProtectionLevel') }}</td>
						<td><input type="text" v-model="formData.protectionLevel" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageTemperatureRange') }}</td>
						<td><input type="text" v-model="formData.workingTemperatureRange" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageCool') }}</td>
						<td><input type="text" v-model="formData.coolingMethod" /></td>
					</tr>
					<tr>
						<td class="label">{{ $t('message.inverterNewsEnter.pageEuropean') }}</td>
						<td><input type="text" v-model="formData.europeanEfficiency" /></td>
						<td class="label">{{ $t('message.inverterNewsEnter.pageCommunication') }}</td>
						<td><input type="text" v-model="formData.communicationMethod" /></td>
					</tr>
				</table>
			</div>
		</div>

		<div class="form-actions">
			<el-button type="primary" @click="submitForm"> {{ $t('message.inverterNewsEnter.pageSubmitForm') }}</el-button>
			<el-button @click="resetForm"> {{ $t('message.inverterNewsEnter.pageResetForm') }}</el-button>
		</div>
	</div>
</template>

<script>
import { ref } from 'vue';

export default {
	setup() {
		const formData = ref({
			stationName: '',
			mpptCount: 0,
			installationLocation: '',
			deviceName: '',
			componentModel: '',
			transformer: '',
			deviceType: '',
			warrantyPeriod: '',
			branchNumber: '',
			deviceInternalNumber: '',
			manufacturerNumber: '',
			componentManufacturer: '',
			modelSpec: '',
			manufacturer: '',
			componentOrientation: '',
			componentPower: '',
			inverterType: '',
			componentTilt: '',
			maxInputPower: 0,
			ratedInputVoltage: 0,
			mpptShortCircuitCurrent: 0,
			startVoltage: 0,
			fullLoadMpptRange: '',
			maxInputStrings: 0,
			workingVoltageRange: '',
			mpptMaxInputCurrent: 0,
			ratedOutputPower: 0,
			powerFactorRange: '',
			maxOutputCurrent: 0,
			ratedOutputVoltage: 0,
			gridConnectionMethod: '',
			outputVoltageFrequencyRange: '',
			maxApparentPower: 0,
			maxTotalHarmonicDistortion: 0,
			ratedOutputVoltageFrequency: 0,
			outputVoltageRange: '',
			maxEfficiency: 0,
			protectionLevel: '',
			workingTemperatureRange: '',
			coolingMethod: '',
			europeanEfficiency: 0,
			communicationMethod: '',
		});

		const submitForm = () => {
			console.log('Form submitted:', formData.value);
		};

		const resetForm = () => {
			Object.keys(formData.value).forEach((key) => {
				formData.value[key] = '';
			});
		};

		return {
			formData,
			submitForm,
			resetForm,
		};
	},
};
</script>

<style scoped>
.inverter-info-form {
	width: 100%;
	max-width: 85rem;
	margin: 0 auto;
	border: 1px solid #ccc;
}

.section {
	.label {
		color: #000;
		width: 10.8rem;
		text-align: center;
		font-weight: 500;
		background-color: #ffffa6;
	}
}

h4 {
	color: #000;
	text-indent: 0.1rem;
	padding: 0.3rem;
	font-weight: bold;
	background-color: #a4cbfa;
}

table {
	width: 100%;
	border-collapse: collapse;
}

td {
	padding: 0.1rem;
	border: 1px solid #ccc;
}

tr {
	padding: 0.1rem;
	border: 1px solid #ccc;
}

input[type='text'],
input[type='number'] {
	width: 100%;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

.form-actions {
	display: flex;
	margin-top: 0.6rem;
	justify-content: center;
}
</style>
